<template>
  <div class="platerecharge-div">
    <div>
      <p>请选择要充值的车牌：</p>
      <div style="margin-top: 30px;">
        <el-radio-group v-model="radio1">
          <el-radio-button label="第一车牌号码"></el-radio-button>
          <el-radio-button label="第二车牌号码"></el-radio-button>
          <el-radio-button label="第三车牌号码"></el-radio-button>
        </el-radio-group>
      </div>
      <p>您当前的车牌号码为： {{plate}}</p>
      <p>您当前车牌号码的余额为： {{balance}}</p>
      <p>为当前车牌号码充值 :</p>
      <el-input placeholder="请输入内容" v-model="amount" clearable></el-input>
    </div>
    <el-button type="primary" @click="recharge" class="change">确认充值</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1:'第一车牌号码',
      amount : '',
      balance : '',
      plate : '',

      plateNumber1 : '',
      plateNumber2 : '',
      plateNumber3 : '',
      plateNumber1_balance : '',
      plateNumber2_balance : '',
      plateNumber3_balance : '',
    }
  },

  methods:{
    async recharge(){
      const resbody = {
        userAccount : window.sessionStorage.getItem('userAccount'),
        plateNumber : '',
        type : 'recharge',
        amount : this.amount
      }

      switch(this.radio1){
        case '第一车牌号码':
          resbody.plateNumber = 'plateNumber1'
          break
        case '第二车牌号码':
          resbody.plateNumber = 'plateNumber2'
          break
        case '第三车牌号码':
          resbody.plateNumber = 'plateNumber3'
          break
      }

      const res = await this.$http.post('user/smallWallet',resbody)

      if(res.data.status === 0){
        this.$message({
          message:'充值成功',
          type:'success'
        })

        const temp =+(this.balance) + +(this.amount) 
        this.balance = temp
        this.amount = ''
      }else{
        this.$message.error({
          message : res.data.message
        })
      }
    }
  },

  created: async function(){
    const res = await this.$http.post('user/userPlateBalance',{
      userAccount : window.sessionStorage.getItem('userAccount'),
    })

    this.plateNumber1 = res.data.plateNumber1
    this.plateNumber2 = res.data.plateNumber2
    this.plateNumber3 = res.data.plateNumber3
    this.plateNumber1_balance = res.data.plateNumber1_balance
    this.plateNumber2_balance = res.data.plateNumber2_balance
    this.plateNumber3_balance = res.data.plateNumber3_balance

    this.plate = this.plateNumber1
    this.balance = this.plateNumber1_balance
  },

  watch:{
     radio1(newName) {
      switch(newName){
        case '第一车牌号码':
          this.balance = this.plateNumber1_balance
          this.plate = this.plateNumber1
          break
        case '第二车牌号码':
          this.balance = this.plateNumber2_balance
          this.plate = this.plateNumber2
          break
        case '第三车牌号码':
          this.balance = this.plateNumber3_balance
          this.plate = this.plateNumber3
          break
      }
    }
  }
}
</script>

<style>
.platerecharge-div{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}

.platerecharge-div>div{
  width: 500px;
  margin-left: 300px;
  padding-top:80px;
}

.platerecharge-div>div>p{
  font-size: 20px;
  margin-top: 50px;
}
</style>